<template>
  <div>
    <Card>
      <div class="top">
        <h2 style="text-align: left;">班级预测</h2>
        <div style="float:left">
          <Select v-model="model1" style="width:200px;margin:5px">
            <Option v-for="item in cityList1" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <Select v-model="model2" style="width:200px;margin:5px">
            <Option v-for="item in cityList2" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <Select v-model="model3" style="width:200px;margin:5px">
            <Option v-for="item in cityList3" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <Button type="success">确认</Button>
        </div>
        <div style="height:50px;"></div>
        <Table border :columns="columns1" :data="data1"></Table>
      </div>
    </Card>
    <div class="box2">
        <div class="box21">
            <Card>
                <h2 style="text-align:left">相关学科影响</h2>
            </Card>
        </div>
        <div class="box21">
            <Card>
                <h2 style="text-align:left">结果分析</h2>
            </Card>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            columns1: [
        {
          title: "科目",
          key: "name"
        },
        {
          title: "平均分",
          key: "age"
        },
        {
          title: "优秀人数",
          key: "address"
        },
        {
          title: "挂科人数",
          key: "date1234"
        }
      ],
      data1: [
        {
          name: "数学",
          age: 70,
          address: "10",
          date1234: "5"
        },
        {
          name: "数学",
          age: 70,
          address: "10",
          date1234: "5"
        }
      ],
        }
    }
};
</script>

<style scoped>
    .box2 {
        display: flex;
    }
    .box21 {
        width: 50%;
        box-sizing: border-box;
        margin: 5px;

    }
</style>